<template>
	<view class="picker" v-show="!picker.hidden">
		<text v-text="picker.label" :class="picker.required ? 'inputRequired' : ''" v-if="picker.label"></text>
		<picker
			:mode="picker.mode"
			:value="calIndex"
			@change="change"
			class="borderBottom "
			:range="picker.range"
			:range-key="rangeKey"
			:name="picker.name"
			:disabled="picker.disabled"
			:start="picker.start"
			:class="picker.disabled ? 'grayBox' : ''"
		>
			<view :class="pickerInputClass">
				<text v-text="picker.text || picker.name"></text>
				<icon class="iconfont iconarrow-right-copy-copy" v-if="!picker.hideIcon"></icon>
			</view>
		</picker>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	created() {},
	methods: {
		change(e) {
			if (this.picker.mode == 'date' || this.picker.mode == 'time') {
				this.picker.value = e.detail.value;
				this.picker.text = e.detail.value;
			} else{
				this.picker.value = this.picker.range[e.detail.value].id || this.picker.range[e.detail.value].value;
				// this.picker.value = e.detail.value
				this.picker.text = this.picker.range[e.detail.value].name;
			}
			this.$emit('pickerChange', this.picker);
			this.EventBus.emit('pickerChange', { key: this.picker.name, value: this.picker.value });
		}
	},
	computed: {
		pickerInputClass() {
			let classes = this.picker.textCenter ? ['pickerInput', 'pickerInputCenter'] : ['pickerInput'];
			return classes;
		},
		rangeKey() {
			let key = this.picker.selectKey ? this.picker.selectKey : 'name';
			return key;
		},
		calIndex() {
			let i = '';
			if (!this.picker.range) return;
			this.picker.range.forEach((item, index) => {
				let val = item.id || item.value;
				if (this.picker.value == val) {
					i = index;
				}
			});
			return i;
		}
	},
	props: {
		picker: {
			type: Object
		},
		column: {
			type: Array
		},
		index: {
			type: Number
		}
	}
};
</script>

<style lang="scss" scoped>
.grayBox {
	background: #f0f0f0;
}
.picker {
	margin: 0 50upx;
	.pickerInput {
		height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10upx;
		text {
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666;
			line-height: 80upx;
		}
	}
	.pickerInputCenter {
		justify-content: center !important;
	}

	text {
		display: inline-flex;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #3c68e5;
	}
}
</style>
